<template>
  <div class="flex flex-col h-full w-full">
    <!-- 顶部导航栏 -->
    <header class="glass sticky top-0 z-50 border-b border-gryffindor-red/30 backdrop-blur-md transition-all duration-300 w-full">
      <div class="w-full px-4 py-3.5 flex justify-between items-center">
        <div class="flex items-center space-x-3">
          <i class="fa fa-magic text-gryffindor-gold text-2xl"></i>
          <h1 class="text-xl font-harry font-bold gradient-text-harry">哈利波特魔法世界</h1>
        </div>
        <div class="flex items-center space-x-5">
          <button class="p-2.5 rounded-full text-gray-400 hover:text-white hover:bg-gray-800/50 transition-all duration-200 transform hover:scale-105 magic-hover">
            <i class="fa fa-wand-magic-sparkles"></i>
          </button>
          <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gryffindor-red to-gryffindor-gold flex items-center justify-center border border-gryffindor-gold">
            <span class="text-sm font-semibold text-white">巫师</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 搜索区域 -->
    <div class="container mx-auto px-4 py-6">
      <div class="relative">
        <input 
          type="text" 
          placeholder="搜索咒语、角色或物品..." 
          class="bg-transparent w-full pl-12 pr-20 outline-none placeholder-gray-400 text-white p-4 rounded-xl glass border border-gryffindor-gold/30"/>
        
        <div class="absolute right-4 top-1/2 transform -translate-y-1/2 flex space-x-2">
          <button class="glass px-3 py-1 rounded-full text-sm hover:bg-white/10 transition-all">
            霍格沃茨
          </button>
          <button class="glass p-2 rounded-full hover:bg-white/10 transition-all">
            <i class="fa fa-search"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-6 relative z-10 mb-10">
      <!-- 左侧面板 -->
      <aside class="lg:col-span-3 glass rounded-xl p-4 h-fit magic-border-harry">
        <h2 class="text-xl font-harry font-bold mb-4 gradient-text-harry">角色选择</h2>
        
        <!-- 角色头像网格 -->
        <div class="grid grid-cols-3 gap-3 mb-6">
          <div class="magic-hover glass rounded-lg p-2 text-center cursor-pointer hover:bg-white/10">
            <img src="https://picsum.photos/id/1005/100/100" alt="红发男孩角色" class="w-16 h-16 rounded-full mx-auto mb-1">
            <span class="text-xs block">罗恩</span>
          </div>
          <div class="magic-hover glass rounded-lg p-2 text-center cursor-pointer hover:bg-white/10">
            <img src="https://picsum.photos/id/1012/100/100" alt="戴眼镜男孩角色" class="w-16 h-16 rounded-full mx-auto mb-1">
            <span class="text-xs block">哈利</span>
          </div>
          <div class="magic-hover glass rounded-lg p-2 text-center cursor-pointer hover:bg-white/10">
            <img src="https://picsum.photos/id/1027/100/100" alt="金发女孩角色" class="w-16 h-16 rounded-full mx-auto mb-1">
            <span class="text-xs block">赫敏</span>
          </div>
          <div class="magic-hover glass rounded-lg p-2 text-center cursor-pointer hover:bg-white/10">
            <img src="https://picsum.photos/id/1074/100/100" alt="黑发男孩角色" class="w-16 h-16 rounded-full mx-auto mb-1">
            <span class="text-xs block">马尔福</span>
          </div>
          <div class="magic-hover glass rounded-lg p-2 text-center cursor-pointer hover:bg-white/10">
            <img src="https://picsum.photos/id/177/100/100" alt="棕发男孩角色" class="w-16 h-16 rounded-full mx-auto mb-1">
            <span class="text-xs block">纳威</span>
          </div>
          <div class="magic-hover glass rounded-lg p-2 text-center cursor-pointer hover:bg-white/10">
            <img src="https://picsum.photos/id/1062/100/100" alt="黑发女孩角色" class="w-16 h-16 rounded-full mx-auto mb-1">
            <span class="text-xs block">金妮</span>
          </div>
        </div>
        
        <!-- 角色信息 -->
        <div class="mb-6">
          <h3 class="text-lg font-magic font-semibold mb-2">哈利·波特</h3>
          <div class="glass rounded-lg p-3">
            <div class="flex justify-between text-sm mb-1">
              <span>魔法力量</span>
              <span class="text-magic-green">92</span>
            </div>
            <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
              <div class="bg-magic-green h-1.5 rounded-full" style="width: 92%"></div>
            </div>
            
            <div class="flex justify-between text-sm mb-1">
              <span>勇气</span>
              <span class="text-magic-blue">98</span>
            </div>
            <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
              <div class="bg-magic-blue h-1.5 rounded-full" style="width: 98%"></div>
            </div>
            
            <div class="flex justify-between text-sm mb-1">
              <span>智慧</span>
              <span class="text-magic-purple">85</span>
            </div>
            <div class="w-full bg-gray-700 rounded-full h-1.5 mb-2">
              <div class="bg-magic-purple h-1.5 rounded-full" style="width: 85%"></div>
            </div>
            
            <div class="flex justify-between text-sm mb-1">
              <span>友谊</span>
              <span class="text-gryffindor-gold">95</span>
            </div>
            <div class="w-full bg-gray-700 rounded-full h-1.5">
              <div class="bg-gryffindor-gold h-1.5 rounded-full" style="width: 95%"></div>
            </div>
          </div>
        </div>
        
        <!-- 角色故事 -->
        <div>
          <h3 class="text-lg font-magic font-semibold mb-2">角色故事</h3>
          <div class="glass rounded-lg p-3 text-sm text-gray-300 h-40 overflow-y-auto scrollbar-hide">
            <p>哈利·波特是一个孤儿，在女贞路4号由佩妮姨妈和弗农姨父抚养长大。他在11岁时得知自己是一名巫师，并被霍格沃茨魔法学校录取。</p>
            <p class="mt-2">他是詹姆·波特和莉莉·波特的儿子，是唯一一位在伏地魔的杀戮咒下幸存的巫师，额头上留下了一道闪电形的伤疤。</p>
          </div>
        </div>
      </aside>
      
      <!-- 中间主区域 -->
      <section class="lg:col-span-6 flex flex-col">
        <!-- 3D角色展示平台 -->
        <div class="glass rounded-xl p-6 flex-grow mb-6 magic-border-harry platform">
          <div class="platform-inner w-full h-[400px] relative flex items-center justify-center">
            <!-- 圆形平台 -->
            <div class="absolute w-[300px] h-[300px] rounded-full bg-gradient-to-b from-magic-blue/20 to-magic-green/20 animate-pulse-slow flex items-center justify-center">
              <div class="w-[280px] h-[280px] rounded-full bg-gradient-to-t from-magic-blue/10 to-magic-green/10 flex items-center justify-center">
                <!-- 角色模型 -->
                <div class="relative w-[200px] h-[300px]">
                  <img src="https://picsum.photos/id/1074/300/600" alt="哈利·波特角色模型" class="w-full h-full object-contain animate-float">
                  
                  <!-- 对话气泡 -->
                  <div class="absolute -right-40 top-1/4 glass p-3 rounded-xl max-w-[200px] magic-border-harry">
                    <p class="text-sm font-magic">"有勇气面对敌人固然可敬，但有勇气面对朋友才是真正的勇敢。"</p>
                    <p class="text-right text-xs mt-1">— 哈利·波特</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 底部信息栏 -->
        <div class="grid grid-cols-4 gap-4">
          <div class="glass rounded-xl p-4 magic-hover magic-border">
            <div class="flex items-center mb-2">
              <img src="https://picsum.photos/id/1027/40/40" alt="赫敏头像" class="w-8 h-8 rounded-full mr-2">
              <h3 class="font-semibold">赫敏·格兰杰</h3>
            </div>
            <p class="text-xs text-gray-300">智慧与知识的代表，是哈利最亲密的朋友之一。</p>
          </div>
          
          <div class="glass rounded-xl p-4 magic-hover magic-border">
            <div class="flex items-center mb-2">
              <img src="https://picsum.photos/id/1061/40/40" alt="霍格沃茨城堡" class="w-8 h-8 rounded-full mr-2">
              <h3 class="font-semibold">霍格沃茨</h3>
            </div>
            <p class="text-xs text-gray-300">世界上最伟大的魔法学校，培养了无数优秀巫师。</p>
          </div>
          
          <div class="glass rounded-xl p-4 magic-hover magic-border">
            <div class="flex items-center mb-2">
              <div class="w-8 h-8 rounded-full bg-gryffindor-red flex items-center justify-center mr-2">
                <i class="fa fa-shield"></i>
              </div>
              <h3 class="font-semibold">勇气指数</h3>
            </div>
            <div class="w-full bg-gray-700 rounded-full h-1.5">
              <div class="bg-gryffindor-gold h-1.5 rounded-full" style="width: 88%"></div>
            </div>
            <p class="text-xs text-right mt-1 text-gryffindor-gold">88/100</p>
          </div>
          
          <div class="glass rounded-xl p-4 magic-hover magic-border">
            <button @click="startAdventure" class="w-full bg-gradient-to-r from-magic-blue to-magic-green text-black font-bold py-2 px-4 rounded-lg hover:opacity-90 transition-opacity animate-pulse">
              开始冒险
            </button>
          </div>
        </div>
      </section>

      <!-- 右侧魔法信息面板 -->
      <aside class="lg:col-span-3 space-y-6">
        <!-- 魔法技能面板 -->
        <div class="glass rounded-xl p-4 magic-border-harry">
          <h2 class="text-xl font-harry font-bold mb-4 gradient-text-harry">魔法技能</h2>
          <div class="space-y-4">
            <div class="flex items-center p-3 rounded-lg hover:bg-white/10 transition-all cursor-pointer magic-hover">
              <div class="w-10 h-10 rounded-full bg-gryffindor-red/30 flex items-center justify-center mr-3">
                <i class="fa fa-fire text-gryffindor-gold"></i>
              </div>
              <div class="flex-1">
                <h3 class="font-medium">火焰咒</h3>
                <p class="text-xs text-gray-400">Incendio</p>
              </div>
              <span class="text-xs bg-gryffindor-red/20 text-gryffindor-gold px-2 py-0.5 rounded-full">攻击</span>
            </div>
            
            <div class="flex items-center p-3 rounded-lg hover:bg-white/10 transition-all cursor-pointer magic-hover">
              <div class="w-10 h-10 rounded-full bg-magic-blue/30 flex items-center justify-center mr-3">
                <i class="fa fa-shield-alt text-magic-blue"></i>
              </div>
              <div class="flex-1">
                <h3 class="font-medium">守护咒</h3>
                <p class="text-xs text-gray-400">Expecto Patronum</p>
              </div>
              <span class="text-xs bg-magic-blue/20 text-magic-blue px-2 py-0.5 rounded-full">防御</span>
            </div>
            
            <div class="flex items-center p-3 rounded-lg hover:bg-white/10 transition-all cursor-pointer magic-hover">
              <div class="w-10 h-10 rounded-full bg-magic-green/30 flex items-center justify-center mr-3">
                <i class="fa fa-wand-sparkles text-magic-green"></i>
              </div>
              <div class="flex-1">
                <h3 class="font-medium">缴械咒</h3>
                <p class="text-xs text-gray-400">Expelliarmus</p>
              </div>
              <span class="text-xs bg-magic-green/20 text-magic-green px-2 py-0.5 rounded-full">控制</span>
            </div>
            
            <div class="flex items-center p-3 rounded-lg hover:bg-white/10 transition-all cursor-pointer magic-hover">
              <div class="w-10 h-10 rounded-full bg-magic-purple/30 flex items-center justify-center mr-3">
                <i class="fa fa-hat-wizard text-magic-purple"></i>
              </div>
              <div class="flex-1">
                <h3 class="font-medium">变形术</h3>
                <p class="text-xs text-gray-400">Transfiguration</p>
              </div>
              <span class="text-xs bg-magic-purple/20 text-magic-purple px-2 py-0.5 rounded-full">变化</span>
            </div>
          </div>
        </div>
        
        <!-- 霍格沃茨学院信息 -->
        <div class="glass rounded-xl p-4 magic-border-harry">
          <h2 class="text-xl font-harry font-bold mb-4 gradient-text-harry">霍格沃茨学院</h2>
          <div class="grid grid-cols-2 gap-3">
            <div class="glass rounded-lg p-3 text-center cursor-pointer hover:bg-white/10 transition-all magic-hover border border-gryffindor-red/30">
              <div class="w-12 h-12 rounded-full bg-gryffindor-red/30 flex items-center justify-center mx-auto mb-2">
                <i class="fa fa-lion text-gryffindor-gold"></i>
              </div>
              <h3 class="font-medium text-sm">格兰芬多</h3>
              <p class="text-xs text-gray-400">勇气与正义</p>
            </div>
            
            <div class="glass rounded-lg p-3 text-center cursor-pointer hover:bg-white/10 transition-all magic-hover border border-ravensclaw-blue/30">
              <div class="w-12 h-12 rounded-full bg-ravensclaw-blue/30 flex items-center justify-center mx-auto mb-2">
                <i class="fa fa-eagle text-ravensclaw-blue"></i>
              </div>
              <h3 class="font-medium text-sm">拉文克劳</h3>
              <p class="text-xs text-gray-400">智慧与知识</p>
            </div>
            
            <div class="glass rounded-lg p-3 text-center cursor-pointer hover:bg-white/10 transition-all magic-hover border border-hufflepuff-yellow/30">
              <div class="w-12 h-12 rounded-full bg-hufflepuff-yellow/30 flex items-center justify-center mx-auto mb-2">
                <i class="fa fa-badger text-hufflepuff-yellow"></i>
              </div>
              <h3 class="font-medium text-sm">赫奇帕奇</h3>
              <p class="text-xs text-gray-400">忠诚与勤奋</p>
            </div>
            
            <div class="glass rounded-lg p-3 text-center cursor-pointer hover:bg-white/10 transition-all magic-hover border border-slytherin-green/30">
              <div class="w-12 h-12 rounded-full bg-slytherin-green/30 flex items-center justify-center mx-auto mb-2">
                <i class="fa fa-snake text-slytherin-green"></i>
              </div>
              <h3 class="font-medium text-sm">斯莱特林</h3>
              <p class="text-xs text-gray-400">野心与机智</p>
            </div>
          </div>
        </div>
        
        <!-- 右侧面板 - 魔法数据 -->
        <div class="glass rounded-xl p-4 magic-border">
          <h2 class="text-xl font-harry font-bold mb-4 gradient-text">魔法数据</h2>
          
          <!-- 魔法能量图表 -->
          <div class="mb-6">
            <h3 class="text-lg font-magic font-semibold mb-2">魔法能量趋势</h3>
            <div class="glass rounded-lg p-3 h-60">
              <canvas id="magicChart"></canvas>
            </div>
          </div>
          
          <!-- 咒语选择器 -->
          <div class="mb-6">
            <h3 class="text-lg font-magic font-semibold mb-2">咒语选择</h3>
            <div class="glass rounded-lg p-3">
              <div class="grid grid-cols-2 gap-2 mb-4">
                <button class="glass p-2 rounded hover:bg-magic-green/20 transition-all text-sm">
                  <i class="fa fa-bolt text-magic-blue mr-1"></i> 除你武器
                </button>
                <button class="glass p-2 rounded hover:bg-magic-green/20 transition-all text-sm">
                  <i class="fa fa-shield text-magic-green mr-1"></i> 盔甲护身
                </button>
                <button class="glass p-2 rounded hover:bg-magic-green/20 transition-all text-sm">
                  <i class="fa fa-eye text-magic-purple mr-1"></i> 阿拉霍洞开
                </button>
                <button class="glass p-2 rounded hover:bg-magic-green/20 transition-all text-sm">
                  <i class="fa fa-fire text-gryffindor-red mr-1"></i> 火焰熊熊
                </button>
              </div>
              
              <!-- 魔法轮盘 -->
              <div class="relative w-48 h-48 mx-auto">
                <div class="absolute inset-0 rounded-full glass flex items-center justify-center">
                  <div class="w-12 h-12 rounded-full bg-magic-green flex items-center justify-center cursor-pointer animate-pulse">
                    <i class="fa fa-magic text-black"></i>
                  </div>
                </div>
                
                <!-- 轮盘上的咒语点 -->
                <div @click="handleSpellWheelClick('sun')" class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full glass flex items-center justify-center cursor-pointer hover:bg-magic-blue/30 transition-all animate-float">
                  <i class="fa fa-sun-o text-yellow-400"></i>
                </div>
                <div @click="handleSpellWheelClick('moon')" class="absolute top-1/4 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full glass flex items-center justify-center cursor-pointer hover:bg-magic-blue/30 transition-all animate-float animation-delay-100">
                  <i class="fa fa-moon-o text-gray-300"></i>
                </div>
                <div @click="handleSpellWheelClick('lightning')" class="absolute bottom-1/4 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full glass flex items-center justify-center cursor-pointer hover:bg-magic-blue/30 transition-all animate-float animation-delay-200">
                  <i class="fa fa-bolt text-yellow-500"></i>
                </div>
                <div @click="handleSpellWheelClick('shield')" class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-8 h-8 rounded-full glass flex items-center justify-center cursor-pointer hover:bg-magic-blue/30 transition-all animate-float animation-delay-300">
                  <i class="fa fa-shield text-blue-300"></i>
                </div>
                <div @click="handleSpellWheelClick('key')" class="absolute bottom-1/4 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full glass flex items-center justify-center cursor-pointer hover:bg-magic-blue/30 transition-all animate-float animation-delay-400">
                  <i class="fa fa-key text-amber-600"></i>
                </div>
                <div @click="handleSpellWheelClick('invisibility')" class="absolute top-1/4 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full glass flex items-center justify-center cursor-pointer hover:bg-magic-blue/30 transition-all animate-float animation-delay-500">
                  <i class="fa fa-eye-slash text-gray-500"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 魔法属性 -->
        <div>
          <h3 class="text-lg font-magic font-semibold mb-2">魔法属性</h3>
          <div class="glass rounded-lg p-3">
            <div class="flex justify-between items-center mb-3">
              <span class="text-sm">魔法抵抗力</span>
              <div class="relative w-24 h-2 bg-gray-700 rounded-full">
                <div class="absolute h-full bg-magic-purple rounded-full" style="width: 75%"></div>
              </div>
              <span class="text-sm text-magic-purple">75%</span>
            </div>
            
            <div class="flex justify-between items-center mb-3">
              <span class="text-sm">咒语精准度</span>
              <div class="relative w-24 h-2 bg-gray-700 rounded-full">
                <div class="absolute h-full bg-magic-blue rounded-full" style="width: 90%"></div>
              </div>
              <span class="text-sm text-magic-blue">90%</span>
            </div>
            
            <div class="flex justify-between items-center">
              <span class="text-sm">能量恢复</span>
              <div class="relative w-24 h-2 bg-gray-700 rounded-full">
                <div class="absolute h-full bg-magic-green rounded-full" style="width: 65%"></div>
              </div>
              <span class="text-sm text-magic-green">65%</span>
            </div>
          </div>
        </div>
      </aside>
    </main>
    
    <!-- 页脚 -->
    <footer class="glass mt-12 py-6 border-t border-magic-blue/30 relative z-10">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <div class="mb-4 md:mb-0">
            <h2 class="text-2xl font-harry font-bold gradient-text">Harry Potter</h2>
            <p class="text-sm text-gray-400 mt-1">探索魔法世界的奇妙冒险</p>
          </div>
          
          <div class="flex space-x-6">
            <a href="#" class="text-gray-400 hover:text-magic-green transition-colors">
              <i class="fa fa-facebook"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-magic-green transition-colors">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-magic-green transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-magic-green transition-colors">
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
        </div>
        
        <div class="mt-6 pt-6 border-t border-gray-700/50 text-center text-sm text-gray-500">
          <p>© 2023 哈利波特魔法世界. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'HarryPotterCharacter',
  setup() {
    // 角色列表数据
    const characters = ref([
      { id: 1, name: '罗恩', avatar: 'https://picsum.photos/id/1005/100/100', house: '格兰芬多' },
      { id: 2, name: '哈利', avatar: 'https://picsum.photos/id/1012/100/100', house: '格兰芬多' },
      { id: 3, name: '赫敏', avatar: 'https://picsum.photos/id/1027/100/100', house: '格兰芬多' },
      { id: 4, name: '马尔福', avatar: 'https://picsum.photos/id/1074/100/100', house: '斯莱特林' },
      { id: 5, name: '纳威', avatar: 'https://picsum.photos/id/177/100/100', house: '格兰芬多' },
      { id: 6, name: '金妮', avatar: 'https://picsum.photos/id/1062/100/100', house: '格兰芬多' }
    ]);

    // 当前选中的角色
    const selectedCharacter = ref(characters.value[1]); // 默认选中哈利

    // 搜索查询
    const searchQuery = ref('');

    // 学院数据
    const houses = [
      { name: '格兰芬多', icon: 'lion', color: 'gryffindor-gold', bgColor: 'gryffindor-red', description: '勇气与正义' },
      { name: '拉文克劳', icon: 'eagle', color: 'ravensclaw-blue', bgColor: 'ravensclaw-blue', description: '智慧与知识' },
      { name: '赫奇帕奇', icon: 'badger', color: 'hufflepuff-yellow', bgColor: 'hufflepuff-yellow', description: '忠诚与勤奋' },
      { name: '斯莱特林', icon: 'snake', color: 'slytherin-green', bgColor: 'slytherin-green', description: '野心与机智' }
    ];

    // 魔法技能数据
    const spells = [
      { name: '火焰咒', incantation: 'Incendio', type: '攻击', icon: 'fire', color: 'gryffindor-gold', bgColor: 'gryffindor-red' },
      { name: '守护咒', incantation: 'Expecto Patronum', type: '防御', icon: 'shield-alt', color: 'magic-blue', bgColor: 'magic-blue' },
      { name: '缴械咒', incantation: 'Expelliarmus', type: '控制', icon: 'wand-sparkles', color: 'magic-green', bgColor: 'magic-green' },
      { name: '变形术', incantation: 'Transfiguration', type: '变化', icon: 'hat-wizard', color: 'magic-purple', bgColor: 'magic-purple' }
    ];

    // 魔法能量数据
    const magicEnergyData = ref({
      labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      datasets: [
        {
          label: '哈利的魔法能量',
          data: [65, 70, 85, 75, 90, 95, 88],
          borderColor: '#00A3FF',
          backgroundColor: 'rgba(0, 163, 255, 0.2)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        },
        {
          label: '赫敏的魔法能量',
          data: [80, 85, 78, 90, 92, 87, 95],
          borderColor: '#BF00FF',
          backgroundColor: 'rgba(191, 0, 255, 0.2)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        }
      ]
    });

    // Chart实例
    let magicChartInstance = null;

    // 初始化魔法能量图表
    const initMagicChart = () => {
      const ctx = document.getElementById('magicChart');
      if (ctx) {
        // 销毁已存在的图表实例
        if (magicChartInstance) {
          magicChartInstance.destroy();
        }
        
        // 尝试使用Chart.js创建图表
        try {
          // 检查是否存在Chart全局对象
          if (window.Chart) {
            magicChartInstance = new window.Chart(ctx, {
              type: 'line',
              data: {
                labels: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
                datasets: [{
                  label: '魔法能量',
                  data: [30, 45, 35, 60, 55, 70, 85],
                  borderColor: '#00A3FF',
                  backgroundColor: 'rgba(0, 163, 255, 0.1)',
                  tension: 0.4,
                  fill: true,
                  pointBackgroundColor: '#00FF9D',
                  pointBorderColor: '#fff',
                  pointRadius: 4,
                  pointHoverRadius: 6
                }]
              },
              options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                  legend: {
                    display: false
                  }
                },
                scales: {
                  x: {
                    grid: {
                      color: 'rgba(255, 255, 255, 0.05)'
                    },
                    ticks: {
                      color: 'rgba(255, 255, 255, 0.7)'
                    }
                  },
                  y: {
                    grid: {
                      color: 'rgba(255, 255, 255, 0.05)'
                    },
                    ticks: {
                      color: 'rgba(255, 255, 255, 0.7)'
                    }
                  }
                }
              }
            });
          } else {
            // 如果没有Chart.js库，使用canvas API绘制一个简单的图表作为备选方案
            const canvas = ctx.getContext('2d');
            
            // 清空画布
            canvas.clearRect(0, 0, ctx.width, ctx.height);
            
            // 设置样式
            canvas.strokeStyle = '#00A3FF';
            canvas.lineWidth = 2;
            canvas.fillStyle = 'rgba(0, 163, 255, 0.2)';
            
            // 简单绘制折线图
            const data = [30, 45, 35, 60, 55, 70, 85];
            const labels = ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'];
            const stepX = ctx.width / (data.length - 1);
            const maxValue = Math.max(...data);
            const stepY = ctx.height * 0.8 / maxValue;
            
            // 绘制填充区域
            canvas.beginPath();
            canvas.moveTo(0, ctx.height - data[0] * stepY);
            
            for (let i = 1; i < data.length; i++) {
              canvas.lineTo(i * stepX, ctx.height - data[i] * stepY);
            }
            
            canvas.lineTo(ctx.width, ctx.height);
            canvas.lineTo(0, ctx.height);
            canvas.closePath();
            canvas.fill();
            
            // 绘制线条
            canvas.beginPath();
            canvas.moveTo(0, ctx.height - data[0] * stepY);
            
            for (let i = 1; i < data.length; i++) {
              canvas.lineTo(i * stepX, ctx.height - data[i] * stepY);
            }
            
            canvas.stroke();
            
            // 绘制数据点
            canvas.fillStyle = '#00FF9D';
            for (let i = 0; i < data.length; i++) {
              canvas.beginPath();
              canvas.arc(i * stepX, ctx.height - data[i] * stepY, 4, 0, 2 * Math.PI);
              canvas.fill();
            }
            
            // 绘制标签
            canvas.fillStyle = '#FFFFFF';
            canvas.font = '10px Arial';
            for (let i = 0; i < data.length; i++) {
              canvas.fillText(labels[i], i * stepX - 10, ctx.height + 15);
            }
            
            // 保存图表实例引用
            magicChartInstance = { destroy: () => {} }; // 模拟实例对象
          }
        } catch (error) {
          console.error('初始化魔法图表失败:', error);
        }
      }
    };
    
    // 魔法粒子效果函数
    const createMagicParticles = () => {
      // 检查是否已存在粒子容器
      let particlesContainer = document.getElementById('particles');
      
      if (!particlesContainer) {
        // 如果不存在，创建粒子容器
        particlesContainer = document.createElement('div');
        particlesContainer.id = 'particles';
        particlesContainer.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 0;
        `;
        document.body.appendChild(particlesContainer);
      }
      
      // 清空现有粒子
      particlesContainer.innerHTML = '';
      
      const particleCount = 50;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        
        // 随机大小和位置
        const size = Math.random() * 3 + 1;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        const delay = Math.random() * 5;
        const duration = Math.random() * 20 + 10;
        
        // 随机颜色
        const colors = ['#00A3FF', '#00FF9D', '#BF00FF'];
        const color = colors[Math.floor(Math.random() * colors.length)];
        
        // 设置粒子样式
        particle.style.cssText = `
          position: absolute;
          width: ${size}px;
          height: ${size}px;
          background-color: ${color};
          border-radius: 50%;
          top: ${posY}%;
          left: ${posX}%;
          opacity: 0.6;
          animation: float ${duration}s ease-in-out ${delay}s infinite;
          pointer-events: none;
        `;
        
        particlesContainer.appendChild(particle);
      }
    };

    // 选择角色
    const selectCharacter = (character) => {
      selectedCharacter.value = character;
    };

    // 搜索处理
    const handleSearch = (query) => {
      searchQuery.value = query;
      // 这里可以添加实际的搜索逻辑
    };

    // 轮盘咒语点击处理
    const handleSpellWheelClick = (spellType) => {
      // 这里可以添加实际的咒语选择逻辑
      console.log('选择了咒语:', spellType);
      // 可以添加魔法效果动画
    };

    // 开始冒险按钮处理
    const startAdventure = () => {
      // 这里可以添加开始冒险的逻辑
      console.log('开始魔法冒险！');
      // 可以添加页面过渡或其他效果
    };

    // 组件挂载时的操作
    onMounted(() => {
      // 添加页面加载动画
      document.body.classList.add('harry-potter-loaded');
      
      // 等待DOM渲染完成后初始化图表
      setTimeout(() => {
        initMagicChart();
      }, 100);
      
      // 创建魔法粒子效果
      createMagicParticles();
    });

    // 组件卸载时清理图表实例和粒子效果
    onUnmounted(() => {
      if (magicChartInstance) {
        magicChartInstance.destroy();
        magicChartInstance = null;
      }
      
      // 清理魔法粒子效果
      const particlesContainer = document.getElementById('particles');
      if (particlesContainer && particlesContainer.parentNode) {
        particlesContainer.parentNode.removeChild(particlesContainer);
      }
    });

    return {
      characters,
      selectedCharacter,
      searchQuery,
      houses,
      spells,
      selectCharacter,
      handleSearch,
      handleSpellWheelClick,
      startAdventure
    };
  }
};
</script>

<style scoped>
/* 自定义字体 */
@font-face {
  font-family: 'HarryP';
  src: url('https://fonts.cdnfonts.com/s/16036/HARRYP__.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Magic';
  src: url('https://fonts.cdnfonts.com/s/12882/MagicMedieval.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 自定义颜色变量 */
:root {
  --gryffindor-red: #740001;
  --gryffindor-gold: #E6B142;
  --slytherin-green: #006400;
  --slytherin-silver: #AAAAAA;
  --ravensclaw-blue: #0000CD;
  --ravensclaw-bronze: #996633;
  --hufflepuff-yellow: #FFD700;
  --hufflepuff-black: #000000;
  --magic-blue: #00A3FF;
  --magic-green: #00FF9D;
  --magic-purple: #BF00FF;
}

/* 字体类 */
.font-harry {
  font-family: 'HarryP', cursive;
}

.font-magic {
  font-family: 'Magic', serif;
}

/* 颜色类 */
.gryffindor-red {
  color: var(--gryffindor-red);
}

.gryffindor-gold {
  color: var(--gryffindor-gold);
}

.slytherin-green {
  color: var(--slytherin-green);
}

.ravensclaw-blue {
  color: var(--ravensclaw-blue);
}

.hufflepuff-yellow {
  color: var(--hufflepuff-yellow);
}

.magic-blue {
  color: var(--magic-blue);
}

.magic-green {
  color: var(--magic-green);
}

.magic-purple {
  color: var(--magic-purple);
}

/* 自定义动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

.animate-pulse-slow {
  animation: pulse-slow 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, 0.5);
}

::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 魔法效果 */
.magic-hover {
  transition: all 0.3s ease;
}

.magic-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 3D旋转平台效果 */
.platform {
  perspective: 1000px;
}

.platform-inner {
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.platform:hover .platform-inner {
  transform: rotateY(10deg) rotateX(5deg);
}

/* 渐变文字 */
.gradient-text {
  background: linear-gradient(45deg, #00A3FF, #00FF9D, #BF00FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

.gradient-text-harry {
  background: linear-gradient(45deg, var(--gryffindor-red), var(--gryffindor-gold), var(--magic-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 玻璃效果 */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 魔法边框 */
.magic-border {
  border: 1px solid;
  border-image: linear-gradient(45deg, #00A3FF, #00FF9D, #BF00FF) 1;
}

.magic-border-harry {
  position: relative;
  border: 1px solid var(--gryffindor-gold);
  border-radius: 0.75rem;
}

.magic-border-harry::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background: linear-gradient(45deg, var(--gryffindor-red), var(--gryffindor-gold), var(--magic-blue), var(--gryffindor-red));
  z-index: -1;
  opacity: 0.5;
  animation: border-glow 8s linear infinite;
  background-size: 400%;
}

@keyframes border-glow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  main {
    grid-template-columns: 1fr !important;
  }
  
  .platform-inner {
    height: 300px !important;
  }
  
  .platform-inner .absolute {
    width: 250px !important;
    height: 250px !important;
  }
  
  .platform-inner .absolute .w-\[280px\] {
    width: 230px !important;
    height: 230px !important;
  }
  
  .platform-inner .relative {
    width: 180px !important;
    height: 250px !important;
  }
  
  .absolute.-right-40 {
    right: -20px !important;
    max-width: 150px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 640px) {
  header .text-xl {
    font-size: 1.25rem;
  }
  
  .platform-inner {
    height: 250px !important;
  }
  
  .platform-inner .absolute {
    width: 200px !important;
    height: 200px !important;
  }
  
  .platform-inner .absolute .w-\[280px\] {
    width: 180px !important;
    height: 180px !important;
  }
  
  .platform-inner .relative {
    width: 150px !important;
    height: 200px !important;
  }
  
  .absolute.-right-40 {
    display: none !important;
  }
}
</style>